<template>
  <div class="order-detail">
    <div class="top">
      <img src="../assets/images/default-pay.png" alt="">
      <span class="text">
        <b>支付类型: <em>{{ order.payType }}</em></b><br/>
        <b>订单编号: <em>{{ order.orderNum }}</em></b><br/>
        <b>支付时间: <em>{{ order.createTime }}</em></b><br/>
        <b>支付状态: <em class="status" :style="{color: getColor(order.state), fontSize: '12px'}">{{ order.state }}</em></b>
        </span>
      <span>
            <b class="price">{{ order.money }}</b>
            <time v-if="order.state === '待支付'" v-interval="order.lifeTime"></time>
        </span>
    </div>
    <div class="bottom">
      <a class="btn cancel" v-if="order.state == '待支付'" @click="cancelOrder(order.id)">取消</a>
      <a class="btn" v-if="order.state == '待支付'" @click="payOrder(order.orderNum)">支付</a>
    </div>
  </div>

</template>

<script>
// 参考文档：https://github.com/TerryZ/v-dialogs
import { DialogAlert } from 'v-dialogs' ;

export default {
  props: {
    order: {type: Object, required: true},
  },
  data() {
    return {
      detail: this.order,
      colors: ["#ff9900", "#19be6b"],
      defaultColor: "#c5c8ce",
    }
  },
  emits: ["cancel-order-success"] ,
  methods: {
    getColor(state) {
      if (state === "待支付") return this.defaultColor;
      if (state === "支付成功" || state === "交易完成") return this.colors[1];
      return this.colors[0];
    },
    payOrder(orderNum) {
       // 检查该笔订单
       this.$api.checkOrder(orderNum).then(ret=> {
          if (!ret.status) {
            window.open(this.$router.resolve({name: "alipayOrder", query: {order_num: orderNum}}).fullPath)
          }else{
            this.$toastr.success("支付已成功");
            this.order.state = "支付成功" ;
          }
       })

    },
    cancelOrder(orderId) {
       // 取消订单
      DialogAlert('您确定要取消该订单吗?', () => {
        this.$api.cancelOrder(orderId).then(ret=> {
          if (ret.status) {
            // 通知父组件，重新查询数据
            this.$emit("cancel-order-success", orderId) ;
          }
        }) ;
      }, { messageType: 'confirm' })
    }
  },
  directives: {
    interval: {
      mounted(el, binding) {
        // 获取绑定的 数据
        let val = binding.value;
        let playing = false;
        // 获取该组件的根节点
        let rootNode = el.parentNode.parentNode.parentNode;

        function showData() {
          if (val < 0) {
            clearInterval(playing);
            rootNode.querySelector(".status").innerText = "已取消";
            rootNode.querySelector(".status").style.color = "#c5c8ce";
            rootNode.querySelector(".bottom").innerText = "";
            el.remove();
          } else {
            let min = Math.floor(val / 60); // 获取分钟数
            let sec = val % 60; // 获取秒数
            el.innerText = (min < 10 ? ("0" + min) : min) + ":" + ((sec < 10) ? "0" + sec : sec);
            val--;
          }
        }
        // 每间隔 1秒 较少 1
        playing = setInterval(showData, 1000);
        showData();
      },
    }
  }
}
</script>

<style scoped>
.order-detail {
  position: relative;
  width: 100%;
  height: 160px;
  background-color: rgba(212, 209, 198, 0.3);
  border-radius: 10px;
  margin-bottom: 20px;
}

.order-detail .top {
  position: relative;
  height: 120px;
  display: flex;
}

.order-detail img {
  height: 100px;
  width: 100px;
  margin: 10px 30px;
}

.order-detail .text {
  display: block;
  line-height: 30px;
  width: 340px;
}

.order-detail .text b {
  font-weight: 400;
}

.order-detail .text em {
  font-weight: 800;
  font-style: normal;
}

.order-detail .text .status {
  display: inline-block;
  width: 70px;
  height: 25px;
  font-size: 18px;
  padding: 3px 5px;
  border: 4px solid lightblue;
  text-align: center;
  position: relative;
  line-height: 24px;
  transform: rotate(-10deg);
}

.order-detail .text .status::after {
  position: absolute;
  content: "";
  width: 68px;
  height: 23px;
  border: 2px solid rgb(197, 229, 240);
  left: 4px;
  top: 2px;
}


.order-detail time, .order-detail .price {
  display: block;
  text-align: right;
  line-height: 60px;
  padding-right: 30px;
  font-size: 24px;
  width: 500px;
}

.order-detail .price::before {
  content: '￥';
}

.order-detail .bottom {
  position: relative;
  height: 40px;
  text-align: right;
  padding-right: 30px;
}

.order-detail .bottom a {
  margin: 0 5px;
}

.order-detail .bottom a.cancel {
  background-color: rgb(155, 155, 155);
}

.order-detail .bottom a.cancel:hover {
  background-color: rgb(88, 88, 88);
}
</style>